<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>下拉框</p>
        <label>选择职位</label>
        <select v-model="selected">
            <option value="1">三毛流浪记</option>
            <option value="2">骆驼祥子</option>
            <option value="3">童年</option>
            <option value="4">简爱</option>
            <option value="5">傲慢与偏见</option>
        </select>
        <label>选择书籍：{{selected}}</label>
        <br>
        <p>单选框</p>
        <input type="radio" class="sex" value="女" v-model="sexx">女
        <input type="radio" class="sex" value="男" v-model="sexx">男
        <label>选择性别：{{sexx}}</label>
        <br>
        <p>复选框</p>
        <input type="checkbox" class="hobbys" value="all" v-model.lazy="hobby" @change="allSur" id="allTack">全选</input>
        <br>
        <input type="checkbox" class="hobbys" value="read" v-model.lazy="hobby">读书
        <input type="checkbox" class="hobbys" value="play" v-model.lazy="hobby">旅游
        <input type="checkbox" class="hobbys" value="talk" v-model.lazy="hobby">演讲
        <input type="checkbox" class="hobbys" value="baskedball" v-model.lazy="hobby">篮球
        <input type="checkbox" class="hobbys" value="look" v-model.lazy="hobby">看报
        <label>选择爱好：{{hobby}}</label>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            selected: '',
            sexx: '女',// 默认
            hobby: []
        },
        computed: {
        },
        methods: {
            allSur: function () {
                if (document.getElementById('allTack').checked) {
                    console.log(document.getElementById('allTack').checked);
                    this.hobby = ["look", "baskedball", "talk", "play", "read"]
                } else {
                    console.log(document.getElementById('allTack').checked);
                    this.hobby = []
                }
            }
        }
    })
</script>

</html>